<!--
 * @Date: 2025-01-16 11:03:40
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-01-17 16:36:39
 * @Description: 用户表格
-->
<template>
  <LayoutFull :="layoutAttrs" >
    <template #aside>
      <RkAdAgTree
        :="treeAttrs"
        @toggleHidden="(hidden) => layoutAttrs.enableAside = !hidden"
        @ad-node-click="adTreeNodeClick"
        @ag-node-click="agTreeNodeClick"
      />
    </template>
    <template #main>
      <rk-grid
        ref="tableRef"
        :="tableAttrs"
        :params="tableParams"
        :columns="tableColumns"
      >
        <template #toolbar_left>
          <el-button type="primary" @click="emits('auth')" >授权</el-button>
        </template>
        <template #toolbar_right>
          <el-input
            v-model="tableParams.keyword"
            style="width: 300px;"
            clearable
            placeholder="请输入用户编码/用户名称/手机号码"
            @change="handleTableSearch"
          >
          </el-input>
        </template>
      </rk-grid>
    </template>
  </LayoutFull>
</template>

<script setup>
import { LayoutFull } from '@/components/container'
import { reactive, ref } from 'vue';

import { useUserStore } from '@/stores/modules';

const emits = defineEmits(['auth'])

// 用户性质
const userInfo = useUserStore().userInfo

// 布局属性配置
const layoutAttrs = reactive({
  enableAside: true,
  enableHeader: false,
})

// 树结构配置
const treeAttrs = reactive({
  adTreeHidden: false,
  agTreeHidden: false,
})
// 树结构数据集
const treeState = reactive({
  adSelectNode: {},
  agSelectNode: {},
})
/**
 * 区划单位树，区划树点击事件
 * 
 * @param node 选择节点
 */
const adTreeNodeClick = (node) => {
  // 防止重复点击
  if (node.code === treeState.adSelectNode.code) return
  treeState.adSelectNode = node
  tableParams.adCode = node.code;
  tableParams.adName = node.name;
  handleTableSearch();
}

/**
 * 区划单位树，单位树点击事件
 * 
 * @param node 选择节点
 */
const agTreeNodeClick = (node) => {
  // 防止重复点击
  if (node.code === treeState.agSelectNode.code) return
  treeState.agSelectNode = node
  tableParams.agCode = node.code;
  tableParams.agName = node.name;
  handleTableSearch();
}

// 表格的Ref对象
const tableRef = ref()
// 表格属性配置
const tableAttrs = reactive({
  // title: '用户列表',
  dataUrl: '/userRoleHome/userPageList',
  keyField: 'guid',
  boxConfig: true
})
// 表格参数配置
const tableParams = reactive({
  adCode: userInfo.adCode,
  adName: userInfo.adName,
  agCode: userInfo.agCode,
  agName: userInfo.agName,
  keyword: '',
})
// 表格字段属性配置
const tableColumns = reactive([
  { field: 'code', title: '用户编码', width: 150, align: 'left' },
  { field: 'name', title: '用户名称', width: 150, align: 'left' },
  { field: 'homeName', title: '关联主页', width: 200, align: 'left' },
  { field: 'roleName', title: '用户角色', width: 150, align: 'left' },
  { field: 'usertype', title: '用户类型', width: 150, align: 'center', formatter: ['enumsFormats', 'USER_TYPE'] },
  {
    field: 'status', title: '状态', width: 150, align: 'center',
    cellRender: { name: 'enumsRender', enumName: 'USER_STATUS_ENUMS', isTag: true }
  },
  { field: 'adName', title: '区划', width: 250, align: 'left' },
  { field: 'agencyName', title: '单位', width: 250, align: 'left' },
  { field: 'job', title: '职称', width: 150, align: 'center' },
])
/**
 * 表格的查询方法
 */
const handleTableSearch = () => {
  tableRef.value.searchEvent()
}


/**
 * 获取选中的行数据
 */
const getCheckedData = () => {
  return JSON.parse(JSON.stringify(tableRef.value.getCheckboxRecords()))
}

/**
 * 清除选中数据
 */
const clearCheckedData = () => {
  tableRef.value.clearCheckboxRow()
}

defineExpose({
  getCheckedData,
  clearCheckedData,
  handleTableSearch
})

</script>

<style lang="scss" scoped>

</style>